<template>
  <el-container>
    <el-main style="display:flex;align-items: center;
  justify-content: center;">
      <div class="login-wrap">
        <div>
          <img :src="loginlogosrc" />
        </div>
        <div>
          <el-form
            :model="loginForm"
            status-icon
            :rules="loginrules"
            ref="loginForm"
            label-width="auto"
            class="demo-ruleForm"
          >
            <el-form-item prop="account">
              <el-input type="text" v-model="loginForm.account" autocomplete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="loginForm.password"
                autocomplete="off"
                placeholder="密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <button class="loginbtn" @click.prevent="submitFormLogin('loginForm')">登录</button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
export default {
  data() {
    var validatepassword = (rule, value, callback) => {
      let pwdRegExp = /[a-zA-Z_0-9]{6,15}/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (pwdRegExp.test(value) != true) {
        callback(new Error("密码格式不正确"));
      } else {
        callback();
      }
    };
    var validateaccount = (rule, value, callback) => {
      let actRegExp = /^[A-Za-z0-9]{3,9}$/;
      if (value === "") {
        callback(new Error("请输入账号"));
      } else if (actRegExp.test(value) != true) {
        callback(new Error("账号格式不正确!"));
      } else {
        callback();
      }
    };
    return {
      loginlogosrc: require("../assets/indexlogo.png"),
      loginForm: {
        account: "",
        password: ""
      },
      loginrules: {
        password: [{ validator: validatepassword, trigger: "blur" }],
        account: [{ validator: validateaccount, trigger: "blur" }]
      }
    };
  },
  methods: {
    //登录
    submitFormLogin(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.post("/admin/login", this.loginForm).then(res => {
            if (res.data) {
              this.$router.push("/index");
            } else {
              this.$message({
                message: "账号密码不正确或是账户被冻结",
                type: "warning"
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style scope>
#app > .el-container {
  height: 100vh;
}
.login-wrap {
  border: 1px solid #ccc;
  width: 500px;
  height: 350px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 2px;
}

.el-input__inner {
  background-color: #0000 !important;
  border-color: #ccc !important;
}

.el-input__inner:focus {
  border-color: #ff9900 !important;
}
.el-form-item__error {
  color: #ff9900 !important;
}
.el-form-item.is-error .el-input__validateIcon {
  color: #ff9900;
}
.loginbtn {
  background-color: #ff9900;
  border: none;
  width: 200px;
  height: 50px;
  font-size: 20px;
  border-radius: 5px;
  font-weight: 600;
}
</style>